/*
 * @Author: xianfuyou
 * @Date: 2022-03-31 23:29:20
 * @LastEditors: your name
 * @LastEditTime: 2022-04-06 16:46:43
 * @Description: file content
 */
/*
 * @Author: xianfuyou
 * @Date: 2022-03-31 11:35:40
 * @LastEditors: your name
 * @LastEditTime: 2022-03-31 15:57:04
 * @Description: file content
 */
import React from 'react'
import { useNavigate, useLocation, useMatch } from 'react-router-dom'
import { Row, Col, Table } from 'antd'
import AddOrderInfo from './AddOrderInfo'
import './css/AddOrder.css'

// 填充表单数据
const data = [];
for (let i = 0; i < 20; i++) {
  data.push({
    key: i,
    clientName: `xianfuyou`,
    linkman: `富贵`,
    tel: `13515311234`,
    QQ: `13515311234`,
    email: `13511531353@qq.com`,
    belongField: `四川广元`,
    followDateStart: '2022-03-30 16:12',
    takePartYear: `2022`,
    enterDateStart: `2022-03-30 16:12`,
    lastDateStart: `0`,
    contractPriceAll: `1234`,
    salesman: `超级管理员`,
  });
}

// 跟单表单配置
const followtable = [
  {
    title: '客户名称',
    dataIndex: 'clientName',
    key: 'clientName',
    // fixed: 'left',
    width: 120,
    render: clientName => <a>{clientName}</a>
  },
  {
    title: '联系人',
    dataIndex: 'linkman',
    key: 'linkman',
    // fixed: 'left',
    width: 120,
  },
  {
    title: '手机号码',
    dataIndex: 'tel',
    key: 'tel',
    width: 120,
  },
  {
    title: 'QQ',
    dataIndex: 'QQ',
    key: 'QQ',
    width: 120,
  },
  {
    title: '电子邮箱',
    dataIndex: 'email',
    key: 'email',
    width: 150,
  },
  {
    title: '所属领域',
    dataIndex: 'belongField',
    key: 'belongField',
    width: 200
  },
  {
    title: '跟单时间',
    dataIndex: 'followDateStart',
    key: 'followDateStart',
    width: 150,
  },
  {
    title: '参展年份',
    dataIndex: 'takePartYear',
    key: 'takePartYear',
    width: 150,
  }
  ,
  {
    title: '录入时间',
    dataIndex: 'enterDateStart',
    key: 'enterDateStart',
    width: 150,
  }
  ,
  {
    title: '最后更新',
    dataIndex: 'lastDateStart',
    key: 'lastDateStart',
    width: 150,
    render: (lastDateStart) => {
      return <>
        <span style={{ color: "#c00000" }}>{lastDateStart}</span> 天前
      </>
    }
  }
  ,
  {
    title: '合同总金额',
    dataIndex: 'contractPriceAll',
    key: 'contractPriceAll',
    width: 150,
    render: (contractPriceAll) => {
      return <>
        <span style={{ color: "#c00000" }}>{contractPriceAll}</span> 元
      </>
    }
  }
  ,
  {
    title: '业务员',
    dataIndex: 'salesman',
    key: 'salesman',
    width: 150,
  }
]

export default function AddOrder() {
  const navigate = useNavigate()
  const { pathname } = useLocation()

  // 点击跳转页面
  const goAddNow = (record) => {
    pathname === "/followOrder/addfollowOrder" ? navigate('/followOrder/fillfollowOrder', { state: { 'userInfo': record } }) : navigate('/order/fillOrder', { state: { 'userInfo': record } })
  }

  return (
    <div className="addorder">
      {/* 高级搜索 */}
      <AddOrderInfo></AddOrderInfo>
      {/* 步骤导航 */}
      <Row justify="center" className="addStep">
        <Col>
          <span className="step">
            1单击选中客户 {'>>'} 2录入信息
          </span>
        </Col>
      </Row>
      {/* 用户表格 */}
      <Row className="tableMessage">
        <Col span={24}>
          <Table
            pagination={{
              defaultCurrent: 2,
              pageSize: 5,
              showSizeChanger: true,
              pageSizeOptions: [2, 3, 4, 5]
            }}
            size="small"
            columns={followtable}
            dataSource={data}
            scroll={{ x: 1800 }}
            onRow={(record) => {
              return {
                onClick: () => { goAddNow(record) }
              }
            }}
          />
        </Col>
      </Row>
    </div>
  )
}
